import React from 'react'
import { Input, Select, DatePicker, Space, Button, Row, Col } from 'antd'
import { SearchOutlined } from '@ant-design/icons';
import List from '../../../components/afterLoan/List';
import Bread from '../../../components/Bread';

const { Option } = Select
const { RangePicker } = DatePicker;

const columns = [
    {
        title: '报告编号',
        dataIndex: 'report_num',
    },
    {
        title: '借款编号',
        dataIndex: 'borrow_num',
    },
    {
        title: '姓名',
        dataIndex: 'name',
    },
    {
        title: '借款期限',
        dataIndex: 'borrow_term',
    },
    {
        title: '贷款类型',
        dataIndex: 'loan_type',
    },
    {
        title: '还款方式',
        dataIndex: 'payment_method',
    },
    {
        title: '贷后检查时间',
        dataIndex: 'check_time'
    },
    {
        title: '检查方式',
        dataIndex: 'check_type',
    },
    {
        title: '检查原因',
        dataIndex: 'check_cause',
    },
    {
        title: '贷后处理意见',
        dataIndex: 'after_opinion',
    },
    {
        title: '贷后建议',
        dataIndex: 'after_suggest',
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
                <a>查看</a>
            </Space>
        )
    }
];

const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        report_num: i,
        borrow_num: i,
        key: i,
        name: `Edward King ${i}`,
        borrow_term: 12,
        loan_type: '个人信用',
        payment_method: '等本等息',
        check_time: '2021-12-29',
        check_type: '电话检查',
        check_cause: '首次检查',
        after_opinion: '贷后处理意见',
        after_suggest: '贷后建议',
    });
}

export default function Inspect() {
    const Search = (
        <div className='after-search'>
            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="姓名/手机号" />
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="合同编号" />
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Input placeholder="借款编号" />
                    </div>
                </Col>
                <Col className="gutter-row" span={3}>
                    <div>
                        <Select
                            showSearch
                            placeholder="处理意见"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="tom">Tom</Option>
                        </Select>
                    </div>
                </Col>
                <Col className="gutter-row" span={5}>
                    <div>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </div>
                </Col>
                <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                            查询
                        </Button>
                    </div>
                </Col>
            </Row>
        </div >
    )
    return (
        <div className='inspect'>
            <Bread bread_title1="贷后管理" bread_title2="贷后检查" />
            {Search}
            <List columns={columns} data={data} isAdd={true} isExportBtn={true} />
        </div>
    )
}
